<template>
	<view class="baseForm">
		<!-- tab-bar切换 -->
		<view class="tab-bar">
			<u-tabs
				:current="activeTab"
				:list="tabList"
				:scrollable="false"
				:activeStyle="{
					color: '#000',
					fontWeight: 'bold',
					transform: 'scale(1.04)'
				}"
				lineWidth="50px"
				lineHeight="2px"
				lineColor="#007aff"
				@change="changeTab"
			></u-tabs>
		</view>

		<!-- 产品信息 -->
		<view v-if="activeTab === 0" class="activeHeight">
			<!-- 列表 -->
			<u-list @scrolltolower="scrolltolower" class="list" v-if="total" :height="listHeight" lowerThreshold="100px">
				<u-list-item v-for="(item, index) in indexList" :key="item.id">
					<view class="card">
						<view class="right">
							<view class="title">
								RFID：{{item.id}}
							</view>
							<view class="body">
								{{item.msgBody || '暂无原因'}}
							</view>
						</view>
						<view class="left">
							{{Math.floor(Math.random() * 1000)}}
						</view>
					</view>
				</u-list-item>
			</u-list>
			<!-- 空数据 -->
			<view v-else>
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</view>		
		</view>

		<!-- 计划信息 -->
		<view v-else>
			<view>
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app';
import { http } from '@/utils/http';
import { PageResult, TabInfo } from '@/types/type';

const activeTab = ref(0);
const tabList = [{ name: '器具统计' }, { name: '器具明细' }];
function changeTab(val: TabInfo) {
	activeTab.value = val.index;
	if (val.index === 1) {
		loadmore();
	}
}

const props = defineProps({
  id: {
    type: String,
    default: '',
  }
});

const indexList = ref([]);
const current = ref(0);
const totalPage = ref(0);
const total = ref(0);
const listHeight = ref('');
		
onShow(()=>{
	// #ifdef H5
	listHeight.value = 'calc(100vh - 88px)'
	// #endif
	
	// #ifdef APP-PLUS
	listHeight.value = 'calc(100vh - 44px)'
	// #endif
	loadmore();
})

onPullDownRefresh(()=> {
	current.value = 0;
	indexList.value = [];
	loadmore('refresh');
})

async function loadmore (type?: string) {
	try{
		current.value += 1
		const result: PageResult<any>  = await http({
			method: 'POST',
			url: '/system/sysmessage/queryByPage',
			data: {
				current: current.value,
				size: 20,
				data: {
					id: Number(props.id)
				}
			}
		})
		const list = result.data;
		totalPage.value = result.page;
		total.value = result.total;
		for (let i = 0; i < list.length; i++) {
			indexList.value.push(list[i]);
		}
		type === 'refresh' && uni.stopPullDownRefresh();
	}catch(e){
		console.log(e)
	}
	
}
const scrolltolower = () => {
	totalPage.value > current.value && loadmore();
};
</script>

<style lang="scss" scoped>
.baseForm {
	.tab-bar {
		padding: 0 40px;
		
	}
	.activeHeight {
		height: calc(100% - 44px);
	}
}

.list {
		.card {
			margin: $uni-page-padding;
			margin-top: 5px;
			margin-bottom: 5px;
			border-radius: 7px;
			display: flex;
			align-items: center;
			padding: 10px 0;
			transition: all 300ms ease;
			box-shadow: 0 0 1px rgba(0,0,0,0.10);
			.left {
				flex-basis: 90rpx;
				text-align: center;
				font-size: 13px;
				color: #0870FF;
			}
			.right {
				flex: 1;
				padding-left: 15px;
				.title {
					font-size: 15px;
					line-height: 20px;
					margin-bottom: 5px;
				}
				.body {
					color: rgba(0,0,0,0.4);
					font-size: 13px;
					line-height: 18px;
				}
			}
		}
	}
</style>
